<template>
  <pc-nav></pc-nav>

    <!-- 空注册页 -->
    <view class=" main ss-flex ss-row-center">
        <div class="left ss-row-center ss-radius-20">
          <image class="ss-flex-1 ss-flex ss-radius-20" style="width: 490px; height: 500px;" mode="aspectfill" src="/static/images/login-bg-s.png">
          </image>
        </div>

      <div class="right ss-row-right ss-radius-bottom-right-20 ss-radius-top-right-20">
        <div class="login-box-user">
          <div class="ss-flex" style="margin-top: 30px; width: 80%; margin-left: 50px;">
            <a class="ss-flex-1 pass-login" style="cursor: pointer;">账号注册</a>
            <view class="head-subtitle" style="color: #999999">请使用本人手机号完成注册</view>
          </div>

          <view class="ss-flex-1 ss-row-center ss-items-center pass-login-con" style="margin-top: 40px; display: block;">
            <uni-forms
              ref="resetPasswordRef"
              v-model="state.model"
              :rules="state.rules"
              validateTrigger="bind"
              labelWidth="140"
              labelAlign="center"
            >
              <input
                type="number"
                class="uni-input ss-flex user  ss-row-center ss-items-center"
                placeholder="请输入手机号"
                v-model="state.model.mobile"
              />

              <div class="ss-flex" style="margin-bottom: 20px; margin-top: 20px;">
                <input type="number"
                       name="code"
                       maxlength="4"
                       v-model="state.model.code"
                       class="uni-input user ss-flex-1 ss-row-center"
                       style="margin-left: 50px; margin-right: 10px;" placeholder="请输入验证码" />
                <button
                  class="sms-btm"
                  :disabled="state.isMobileEnd"
                  :class="{ 'code-btn-end': state.isMobileEnd }"
                  @tap="getSmsCode('resetPassword', state.model.mobile)"
                  >
                  {{ getSmsTimer('resetPassword') }}
                </button>
              </div>


                <uni-easyinput
                  class="user"
                  style="width: 80%; margin-left: 50px; line-height: 30px; border: 1px #e4e4e4 solid; padding: 4px; padding-left: 10px;"
                  type="password"
                  placeholder="请输入密码"
                  v-model="state.model.password"
                  :inputBorder="false"
                >
                </uni-easyinput>

<!--              <input
                type="password"
                class="uni-input ss-flex user ss-row-center ss-items-center"
                placeholder="密码（6-16位，必含：字母、数字）"
                v-model="state.model.password"
              />-->

            <button type="primary" @tap="resetPasswordSubmit" class="ss-rest-button ss-r-14 user ui-Shadow-Main">重置密码</button>
              <view style="width:75%; margin: 0 auto; justify-content: space-between" class="ss-flex">
                <view @tap="gourl('/pages/index/login')">返回登录</view>
                <view>忘记密码？</view>
              </view>
            </uni-forms>
          </view>
        </div>

      </div>
    </view>
  <div class="container-fluid mb-3">
    <pc-footer></pc-footer>
  </div>
</template>

<script setup>
  import { computed, watch, ref, reactive, unref } from 'vue';
  import sheep from '@/sheep';
  import { code, mobile, password } from '@/sheep/validate/form';
  import {getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';

  import PcNav from '@/sheep/components/pc-nav/pc-nav.vue';
  import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  const props = defineProps({
    agreeStatus: {
      type: Boolean,
      default: false,
    },
  });

  const resetPasswordRef = ref(null);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  // 数据
  const state = reactive({
    isMobileEnd: false, // 手机号输入完毕
    model: {
      mobile: '', //手机号
      code: '', //验证码
      password: '', //密码
    },
    rules: {
      code,
      mobile,
      password,
    },
  });

  // 4.重置密码
  const resetPasswordSubmit = async () => {
    const validate = await unref(resetPasswordRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;
    sheep.$api.user.resetPassword(state.model).then((res) => {
      if (res.code === 1) {
        sheep.$store('user').getInfo();
        gourl('/pages/index/index');
      }
    });
  };

  function gourl(url){
    sheep.$router.go(url);
  }
</script>


<style scoped>
  html, body{
    height: none !important;
  }
  .sms-btm{
    width: 150px;
    margin-right: 50px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #666666;
  }
  uni-page-body{
    background-color: #f6f6f6 !important;
  }
  .pass-login, .sms-login{
    font-size: 20px;
    color: #0C1A29;
    font-weight: bold;
    text-decoration: none;
  }
  .redfont{
    color: #0c53bf;
  }

  .main{
    width: 1200px;
    margin: 0 auto;
    /*height: calc(100vh - 389px);*/
    height: 500px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .left, .right{
    width: 490px;
    background-color: #FFFFFF;
    height: 500px;
  }
  .right{
    margin-left: 0px;
    position: relative;
    padding-top: 60px;
  }

  .user{
    font-size: 16px;
    width: 80%;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 10px;
  }
  .password{
    font-size: 16px;
  }

  .uni-input{
    border: 1px #e4e4e4 solid;
    padding: 10px;
    height: 46px;
    line-height: 36px;
  }
  button{
    height: 46px;
    line-height: 46px;
  }
  .login-box{
    position: absolute;
    top: 3px;
    right: 3px;
  }
  .ewm-ico, .input-ico{
    cursor: pointer;
  }

</style>
